<!DOCTYPE html>
<html>
<head>
    <style>
        .error-message {
            color: red;
            margin-left: 10px;
            display: none;
        }
        .success-img {
            width: 20px;
            height: 20px;
        }
        .form-group {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <form id="registerForm">
        <div class="form-group">
            <label>输入姓名：</label>
            <input type="text" id="name">
            <span class="error-message" id="nameError"></span>
        </div>

        <div class="form-group">
            <label>输入年龄：</label>
            <input type="number" id="age">
            <span class="error-message" id="ageError"></span>
        </div>

        <div class="form-group">
            <label>输入密码：</label>
            <input type="password" id="password">
            <span class="error-message" id="pwdError"></span>
        </div>

        <div class="form-group">
            <label>确认密码：</label>
            <input type="password" id="confirmPwd">
            <span class="error-message" id="confirmPwdError"></span>
        </div>

        <div class="form-group">
            <label>输入号码：</label>
            <input type="tel" id="phone">
            <span class="error-message" id="phoneError"></span>
        </div>

        <button type="submit">注册</button>
    </form>
    <div id="successMessage"></div>

    <script>
        const form = document.getElementById('registerForm');
        const successMessage = document.getElementById('successMessage');

        function validateName() {
            const name = document.getElementById('name').value.trim();
            const error = document.getElementById('nameError');
            if (!name) {
                error.textContent = '姓名不能为空';
                error.style.display = 'inline';
                return false;
            }
            if (name.length > 10) {
                error.textContent = '姓名不能超过10位';
                error.style.display = 'inline';
                return false;
            }
            error.style.display = 'none';
            return true;
        }
        function validateAge() {
            const age = document.getElementById('age').value;
            const error = document.getElementById('ageError');
            if (!/^[1-9]\d*$/.test(age)) {
                error.textContent = '年龄必须是正整数';
                error.style.display = 'inline';
                return false;
            }
            if (age < 1 || age > 150) {
                error.textContent = '年龄范围1-150';
                error.style.display = 'inline';
                return false;
            }
            error.style.display = 'none';
            return true;
        }

        function validatePassword() {
            const pwd = document.getElementById('password').value;
            const error = document.getElementById('pwdError');
            if (!pwd) {
                error.textContent = '密码不能为空';
                error.style.display = 'inline';
                return false;
            }
            if (pwd.length < 6) {
                error.textContent = '密码不能少于6位';
                error.style.display = 'inline';
                return false;
            }
            error.style.display = 'none';
            return true;
        }

        function validateConfirmPassword() {
            const confirmPwd = document.getElementById('confirmPwd').value;
            const pwd = document.getElementById('password').value;
            const error = document.getElementById('confirmPwdError');
            if (!confirmPwd) {
                error.textContent = '确认密码不能为空';
                error.style.display = 'inline';
                return false;
            }
            if (confirmPwd !== pwd) {
                error.textContent = '两次密码不一致';
                error.style.display = 'inline';
                return false;
            }
            error.style.display = 'none';
            return true;
        }

        function validatePhone() {
            const phone = document.getElementById('phone').value;
            const error = document.getElementById('phoneError');
            if (!phone) {
                error.textContent = '手机号不能为空';
                error.style.display = 'inline';
                return false;
            }
            if (!/^1\d{10}$/.test(phone)) {
                error.textContent = '必须是1开头的11位数字';
                error.style.display = 'inline';
                return false;
            }
            error.style.display = 'none';
            return true;
        }

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            const isValid = [
                validateName(),
                validateAge(),
                validatePassword(),
                validateConfirmPassword(),
                validatePhone()
            ].every(result => result);

            if (isValid) {
                successMessage.innerHTML = "注册成功";
            } else {
                successMessage.innerHTML = '';
            }
			if (isValid) {
					    const successIcon = document.createElement('img');
					    successIcon.src = "images/ok.png"; 
					    successIcon.alt = "";
					    form.appendChild(successIcon);
			}
        });

        // 添加输入实时验证
        document.getElementById('name').addEventListener('blur', validateName);
        document.getElementById('age').addEventListener('blur', validateAge);
        document.getElementById('password').addEventListener('blur', validatePassword);
        document.getElementById('confirmPwd').addEventListener('blur', validateConfirmPassword);
        document.getElementById('phone').addEventListener('blur', validatePhone);
    </script>
</body>
</html>